<template>
	<Layout showFooter>
		<template #title>支付详情</template>
		<view class="inline-flex fill p30">
			<view class="inline-flex aic jcsb section-box service-detail">
				<image class="service-detail__image"></image>
				<view class="inline-flex column jcsb service-detail__info">
					<view class="service-detail__info__intro">
						<view class="ellipsis-line-clamp">
							公司律师函代写服务公司律师函代写服务公司律师函代写服务公司律师函代写服务
						</view>
					</view>
					<view class="service-detail__info__price">
						<text class="rmb-symbol">¥</text>
						<text class="rmb-number">399.20</text>
					</view>
				</view>
			</view>
		</view>

		<InfoBlock>
			<InfoBlockItem color="rl">
				<template #label>服务律师</template>
				平台指派律师
			</InfoBlockItem>

			<InfoBlockItem color="rl">
				<template #label>联系电话</template>
				18642568781
			</InfoBlockItem>

			<InfoBlockItem color="rl">
				<template #label>优惠券</template>
				暂无可用
			</InfoBlockItem>

			<InfoBlockItem color="ll">
				<template #label>联系人</template>
				<u-input v-model="formData.linkman" placeholder="请输入" input-align="right"></u-input>
			</InfoBlockItem>
			<view class="inline-flex fill p20">
				<view class="inline-flex fill form-content">
					<view class="form-content__textarea">
						<u-input :style="{width:'100%'}" height="270" type="textarea" maxlength="500"
							v-model="formData.content" :custom-style="{width:'100%',backgroundColor:'#F9F9F9'}"
							placeholder="请输入描述需求和遇到问题"></u-input>
					</view>
					<view class="form-content__compute">{{formData.content.length}}/500</view>
				</view>
			</view>
		</InfoBlock>

		<view class="inline-flex fill p30 aic agreement ">
			<u-checkbox v-model="agreement"></u-checkbox>
			我已阅读并同意<text>《服务规范》</text>
		</view>

		<template #footer>
			<view class="inline-flex fill jcsb p30">
				<view class="inline-flex sdf-left summation">
					<text class="summation__text">合计：</text>
					<view class="rmb">
						<text class="rmb-symbol">￥</text>
						<text class="rmb-price">399.09</text>
					</view>
				</view>

				<view class="inline-flex sdf-right">
					<u-button size="submajor" type="primary">
						<text>立即购买</text>
					</u-button>
				</view>
			</view>
		</template>
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import InfoBlock from '@/components/info-block/info-block.vue';
	import InfoBlockItem from '@/components/info-block/info-block-item.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ServiceType } from '@/utils/constant';
	import { ref } from 'vue';
	const serviceType = ref<ServiceType>(ServiceType.None)
	onLoad((option) => {
		option = option as { serviceType : ServiceType };
	});
	const agreement = ref(false);
	const formData = ref({
		linkman: '',
		content: ''
	})
</script>

<style scope lang="scss">
	.section-box {
		width: 690rpx;
		padding: 24rpx;
		border-radius: 8rpx;
		background: #FFF;
	}

	.service-detail {
		&__image {
			width: 168rpx;
			height: 168rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
			background-color: wheat;
		}

		&__info {
			width: 450rpx;
			height: 168rpx;
			padding: 13rpx 0 10rpx 0;

			&__intro {
				color: #000000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}

			&__price {

				.rmb-symbol {
					color: #101010;
					text-align: center;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}

				.rmb-number {
					color: #101010;
					text-align: center;
					font-family: "PingFang SC";
					font-size: 40rpx;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			}
		}
	}

	.form-content {
		padding: 20rpx 20rpx 50rpx 20rpx;
		background: #F9F9F9;
		border-radius: 12rpx;

		&__textarea {
			display: inline-block;
			width: 100%;
			height: 310rpx;
			overflow-y: auto;
		}

		&__compute {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			color: #929292;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}

	.agreement {
		color: #929292;
		font-family: "PingFang SC";
		font-size: 28rpx;
		line-height: 28rpx;

		text {
			color: #000000;
		}
	}

	.sdf {
		&-left {
			.rmb {
				&-symbol {
					color: #F65C5C;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 500;
				}

				&-price {
					line-height: 52rpx;
					font-size: 52rpx;
					color: #F65C5C;
					font-weight: 600;
				}
			}

			&.summation {
				align-items: flex-end;

				&__text {
					color: #000000;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>